<template>
  <div class="menu-outer">
    <div class="menu-item-outer" @click="goPage('/page01')">区位分析</div>
    <div class="menu-item-outer" @click="goPage('/page02')">项目配套</div>
    <div class="menu-item-outer" @click="goPage('/page03')">项目地块基础指标</div>
    <div class="menu-item-outer" @click="goPage('/page04')">项目详情</div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
// const route = useRoute();

function goPage(params) {
  router.push({
    path: params,
  });
}
</script>

<style scoped>
.menu-outer {
  width: 204px;
  height: calc(100% - 24px);
  background-color: #fff;
  padding: 12px 0;
  border-right: #ccc 1px solid;
}
.menu-item-outer {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  font-weight: 700;
  padding-left: 20px;
  cursor: pointer;
}
.menu-item-outer:hover {
  background-color: #d1d1d1;
}
</style>
